<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/XHTML/CommonColumnsContent.xhtml">
		<ui:define name="header">
			<ui:include src="/WEB-INF/facelets/header.jspx" />
		</ui:define>
		<br />
		<br />

		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Loading"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>

				<h:form id="form">
					<div align="center">
						<h:link id="cmdBack" outcome="goInitialMenu" value="Back"
							style="color:blue;" />
					</div>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<p:panel id="msgProjectMembresiaTitle" header="Membresia">
						<p:messages id="msg" showDetail="true" />
						<p:growl id="men" />
						
						<p:focus for="txtNumeroTarjeta"/>
						
						<h:panelGrid columns="3" id="panel">
							
							
							<h:outputText value="NumeroTarjeta" style="width:140px" />
							<p:inputText id="txtNumeroTarjeta"
								binding="#{membresiaView.txtNumeroTarjeta}" style="width:140px">
								<p:ajax listener="#{membresiaView.listenerNumeroTarjeta}"
									update="panel,panelBotones" />
							</p:inputText>
							<br />


							<h:outputText id="msgAlias" value="Alias" style="width:140px" />
							<p:inputText id="alias" binding="#{membresiaView.txtAlias}"
								style="width:140px" readonly="true" disabled="true" />
							<p:commandButton oncomplete="dialog.show();" icon="ui-icon-wrench" />



							<h:outputText value="Tipo Membresía" />
							<p:selectOneMenu style="width:135px"
								binding="#{membresiaView.somTiposMembresia}" disabled="true">
								<f:selectItems value="#{membresiaView.losTiposMembresias}" />
							</p:selectOneMenu>
							<br />

							<h:outputText value=" FechaInicio" style="width:140px" />
							<p:inputText binding="#{membresiaView.txtFechaInicial}"
								readonly="true" style="width:140px" disabled="true" />
							<br />

							<h:outputText value=" FechaFin" style="width:140px" />

							<p:calendar showOn="button" navigator="true" locale="en"
								binding="#{membresiaView.txtFechaFin}" disabled="true">
								<p:ajax event="dateSelect"
									listener="#{membresiaView.listener_txtFechaFin}" update="men" />
							</p:calendar>
							<br />

							<h:outputText value=" IdContrato" style="width:140px" />
							<p:inputText id="txtIdContrato"
								binding="#{membresiaView.txtIdContrato}" style="width:140px"
								disabled="true" />
							<br />

						</h:panelGrid>



						<h:panelGrid id="panelBotones" columns="4">

							<p:commandButton id="btnSave" disabled="true" value="Guardar"
								action="#{membresiaView.action_save}"
								update="msg,panel,panelBotones"
								binding="#{membresiaView.btnSave}" />
							<p:commandButton id="btnModify" disabled="true" value="Modificar"
								action="#{membresiaView.action_modify}"
								update="msg,panel,panelBotones"
								binding="#{membresiaView.btnModify}" />


							<p:commandButton id="btnClear" disabled="false" value="Limpiar"
								action="#{membresiaView.action_clear}"
								update="msg,panel,panelBotones"
								binding="#{membresiaView.btnClear}" />

						</h:panelGrid>


					</p:panel>

					<p:dialog header="Usuario Membresia" widgetVar="dialog">
						<p:dataTable var="var" value="#{membresiaView.losUsuarios}"
							rows="10" paginator="true">


							<p:column headerText="Alias" filterBy="#{var.alias}"
								sortBy="#{var.alias}">
								<h:outputText value="#{var.alias}" />
							</p:column>

							<p:column headerText="Nombres" filterBy="#{var.nombre}"
								sortBy="#{var.nombre}">
								<h:outputText value="#{var.nombre}" />
							</p:column>

							<p:column headerText="Apellidos" filterBy="#{var.apellido}"
								sortBy="#{var.apellido}">
								<h:outputText value="#{var.apellido}" />
							</p:column>

							<p:column headerText="Sexo" filterBy="#{var.sexo}"
								sortBy="#{var.sexo}">
								<h:outputText value="#{var.sexo}" />
							</p:column>

							<p:column headerText="Seleccionar">
								<p:commandButton icon="ui-icon-search"
									action="#{membresiaView.actionSeleccionarUsuario}"
									update=":form:alias" oncomplete="dialog.hide();">
									<f:setPropertyActionListener
										target="#{membresiaView.usuarioSeleccionado}" value="#{var}" />
								</p:commandButton>
							</p:column>

						</p:dataTable>

					</p:dialog>

				</h:form>
			</f:view>
		</ui:define>

		<ui:define name="footer">
			<ui:include src="/WEB-INF/facelets/footer.jspx" />
		</ui:define>
	</ui:composition>
</h:body>

</html>
